<template>
	<view class="list__item--input">
		<slot name='prefix' class="prefix"></slot>
		<input :placeholder="placeholder" :maxlength="maxlength" spellcheck="false" :type="showPassword ? type : 'text'"
		 :disabled="disabled" v-model="val" @blur="()=>{if(!val) isFocus = false}" @focus="isFocus = true" class="input__box" placeholder-style="color: #CCCCCC;font-size: 16px"
		 :password="type === 'password' && showPassword" :adjust-position="adjustPosition" :confirm-type="confirmType"
		 tocapitalize="off" :focus="focus"/>
		<image src="/static/image/login/cancel.png" class="input__del" @tap="clearIcon" v-show="showClearIcon"></image>
		<uni-icons v-if="isShowArrow" class="icon__right"  type="right" size="20" color="#bfbfbf"></uni-icons>
	</view>
</template>

<script>
	export default {
		name: 'formListItem',
		props: {
			placeholder: {
				type: String,
				default: '请输入'
			},
			value: {
				type: String,
				require: true
			},
			type: {
				type: String,
				default: 'text'
			},
			placeholderStyle: {
				type: String,
				default: 'color: #ccc'
			},
			adjustPosition: {
				type: Boolean,
				default: true
			},
			confirmType: {
				type: String,
				default: "done"
			},
			maxlength: {
				type: Number,
				default: 40
			},
			focus: {
				type: Boolean,
				default: false
			},
			isShowArrow: {
				type: Boolean,
				default: true
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return {
				isFocus: false,
				showPassword: true,
				val: this.value,
			}
		},
		methods: {
			//清除输入框的值
			clearIcon() {
				this.val = '';
				
			},
			//改变显示密码
			changeShowPassword() {
				this.showPassword = !this.showPassword;
			},
		},
		computed: {
			showClearIcon(){
				return this.val && this.isFocus;
			}
		},
		watch: {
			val: {
				handler: function(newVal, oldVal) {
					this.$emit('input', newVal)
				}
			},
			value: {
				handler: function(newVal, oldVal) {
					this.val = newVal
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list__item {
		
		&--input {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-top: 20rpx;
			padding-bottom: 30rpx;
			
			.input__box {
				display: flex;
				flex: 1;
				background-color: #fff;
				border: none;
				font-size: $uni-font-size-lg;
				outline: 0;
				
				&input:focus-visible {
					outline: 0;
					border: none
				}
			}
			
			.input__del {
				width: 30rpx;
				height: 30rpx;
			}
		}
		
	}

</style>
